<template>
    <div>

        <!-- 添加和修改的弹出层开始 -->
        <el-dialog
                :title="title"
                :visible.sync="dialogVisible"
                width="600px"
                center
                append-to-body
        >
            <el-form ref="form" :model="form" :rules="rules" label-width="80px">
                <el-row>
                    <el-col :span="24">
                        <el-input v-if="false" v-model="form.parentId"  clearable size="small" :disabled="disabled" />
                        <el-form-item label="上级菜单" prop="parentName">
                            <el-input  :placeholder="parentName" clearable size="small" :disabled="disabled" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="菜单类型" prop="menuType">
                            <el-radio-group v-model="form.menuType"  @change="selectLabel">
                                <el-radio label="M">目录</el-radio>
                                <el-radio label="C">菜单</el-radio>
                                <el-radio label="F">按钮</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="菜单名称" prop="menuName">
                            <el-input v-model="form.menuName" placeholder="请输入菜单名称" clearable size="small" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="路由地址" prop="path">
                            <el-input v-model="form.path" placeholder="请输入路由地址" clearable size="small" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item v-if="form.menuType==='F'" label="权限标识" prop="percode">
                            <el-input v-model="form.percode" placeholder="请输入权限标识" clearable size="small" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="状态" prop="status">
                            <el-radio-group v-model="form.status">
                                <el-radio
                                        v-for="dict in statusOptions"
                                        :key="dict.dictValue"
                                        :label="dict.dictValue"
                                        :value="dict.dictValue"
                                >{{ dict.dictLabel }}</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="备注" prop="remark">
                            <el-input v-model="form.remark" type="textarea" />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleSubmit">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </span>
        </el-dialog>
        <!-- 添加和修改的弹出层结束 -->

        <!-- 查询条件开始 -->
        <el-form ref="queryForm" :model="queryParams" :inline="true" label-width="68px">
            <el-form-item label="菜单名称" prop="menuName">
                <el-input
                        v-model="queryParams.menuName"
                        placeholder="请输入菜单名称"
                        clearable
                        size="small"
                        style="width:140px"
                />
            </el-form-item>
            <el-form-item label="状态" prop="status">
                <el-select
                        v-model="queryParams.status"
                        placeholder="请选择状态"
                        clearable
                        size="small"
                        style="width:140px"
                >
                    <el-option
                            v-for="dict in statusOptions"
                            :key="dict.dictValue"
                            :label="dict.dictLabel"
                            :value="dict.dictValue"
                    />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" circle @click="queryTable"></el-button>
                <el-button type="warning" icon="el-icon-refresh" circle @click="refreshQuery"></el-button>
            </el-form-item>
        </el-form>
        <!-- 查询条件结束 -->

        <!-- 数据表格开始 -->
        <el-table
                border
                :data="menuTableList"
                row-key="menuId"
                :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
        >
            <el-table-column v-if="false" label="菜单编号" align="left" prop="menuId" />
            <el-table-column label="菜单名称" align="left" prop="menuName" />
            <el-table-column label="菜单类型" align="center" prop="menuType">
                <template slot-scope="scope">
                    <el-tag
                            :type="scope.row.menuType==='M'?'primary':scope.row.menuType==='C'?'danger':'success'"
                    >
                        {{ scope.row.menuType==='M'?'目录':scope.row.menuType==='C'?'菜单':'权限' }}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column label="组件路径" align="center" prop="path" />
            <el-table-column label="权限标识" align="center" prop="percode" />
            <el-table-column label="状态" align="center" prop="status" :formatter="statusFormat" />
            <el-table-column label="创建时间" align="center" prop="createTime" width="170"/>
            <el-table-column label="备注" align="center" prop="remark" />
            <el-table-column label="操作" align="center" width="200">
                <template slot-scope="scope">
                    <el-button type="text" icon="el-icon-edit" size="mini" @click="updMenu(scope.row)">修改</el-button>
                    <el-button type="text" icon="el-icon-plus" size="mini" @click="addMenu(scope.row)">添加</el-button>
                    <el-button type="text" icon="el-icon-delete" size="mini" @click="delMenu(scope.row)">删除</el-button>
                </template>
            </el-table-column>

        </el-table>
        <!-- 数据表格结束 -->
    </div>
</template>

<script>
    export default {
        name: "User",
        data(){
          return{
              //上级菜单名字对象
              parentName:'',
              //点击单选按钮时存储 上级菜单名字 和 id
              pName:"",
              pId:'',
              //表单对象
              form:{
                  menuType: 'M',
                  status: '0'
              },
              //表单中父菜单输入框禁用
              disabled:true,
              //菜单树的数据
              menuOptions:[],
              //模糊查询的条件
              queryParams:{},
              //模糊查询存放数据
              treeTableData:[],
              //添加修改菜单控值
              dialogVisible:false,
              //添加修改表单标题
              title:'',
              //表单验证规则
              rules: {
                  menuName: [
                      {required: true, message: '菜单名称不能为空', tirgger: 'blur'}
                  ]
              },
              //系统状态
              statusOptions:[],
              //表格数据
              menuTableList:[],
              expandRow: [],
          }
        },

        created() {
            this.initTable();
            this.initStatus();
        },
        methods:{

            /*表格外按钮事件*/
            queryTable(){  //搜索按钮触发
                //查询条件为空时
                this.initTable();
            },
            refreshQuery(){  //重置模糊查询按钮触发
                this.queryParams={};
                this.initTable();
            },

            /*表格内点击事件*/
            updMenu(row){  //修改菜单按钮触发事件
                if (this.$refs.form != undefined) {
                    this.$refs.form.clearValidate();
                }
                // if (this.$refs.form != undefined) {
                //     this.$refs.upload.clearFiles();
                //     this.$refs.form.resetFields();
                //     // this.$refs['form'].resetFields();
                // }
                this.title='修改菜单信息';
                //显示弹出对话框
                this.dialogVisible = true;
                this.parentName = row.menuName;
                //将当前行的字典数据ID赋值给表单
                this.form.menuId = row.menuId;
                //采取深克隆的形式
                this.form = JSON.parse(JSON.stringify(row));
            },
            delMenu(row){
                this.$confirm('此操作将永久删除该菜单, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$http.delete(`/system/api/menu/deleteMenuByIds/${row.menuId}`).then(result=>{
                        if (result.data.data){
                            this.$message({
                                showClose: true,
                                message: result.data.msg,
                                type: 'success'
                            });
                        }else {
                            this.$message({
                                showClose: true,
                                message: '操作失败',
                                type: 'error'
                            });
                        }
                        this.initTable();
                    })
                }).catch(() => {
                    this.$message.info('删除已取消')
                })
            },
            addMenu(row){  //表格内添加按钮触发
                // if (this.$refs.form != undefined) {
                //     this.$refs.form.clearValidate();
                // }
                if (this.$refs.form != undefined) {
                    this.$refs['form'].resetFields();
                }
                //弹出添加/修改表单
                this.dialogVisible=true;
                this.title = '添加表单信息';
                this.parentName = row.menuName;
                this.form = {
                    menuType: 'M',
                    status: '0'
                };
                if (row != null) {
                    this.form.parentId = row.menuId
                    if (row.menuType === 'M') {
                        this.form.menuType = 'C'
                    } else if (row.menuType === 'C') {
                        this.form.menuType = 'F'
                    }
                }
                //把当前行的菜单id赋值给新建菜单的父菜单id
                this.form.parentId = row.menuId;

            },
            selectLabel:function (val){   //表单中单选框的选项规则
                //判断当前显示的值是否为M
                this.isShow=(val==="M")?true:false;
                if (this.isShow){  //当选择的是目录时，将上级菜单Id改为0，清除提示框内容
                    //当选择的值为M时，将菜单或按钮的名字传递给pName暂存
                    this.pName = this.parentName;
                    this.pId = this.form.parentId;
                    this.parentName = '';
                    this.form.parentId = '0';
                }else {  //当选择的不是目录时，将暂时存储的值再赋值给表单或者是显示框
                    this.parentName = this.pName;
                    this.form.parentId = this.pId;
                }
            },
            handleSubmit(){  // 添加/修改表单确定按钮触发
                this.$refs['form'].validate((valid) => {
                    if (valid) {
                        this.$http.post("/system/api/menu/saveOrUpdateMenu",this.form).then(result=>{
                            if (result.data.data){
                                this.$message({
                                    showClose: true,
                                    message: result.data.msg,
                                    type: 'success'
                                });
                            }else {
                                this.$message({
                                    showClose: true,
                                    message: '操作失败',
                                    type: 'error'
                                });
                            }
                            // 关闭弹出对话框
                            this.dialogVisible = false;
                            //清空绑定的输入框数据
                            this.parentName='';
                            this.title='';
                            // 刷新表格数据
                            this.initTable();
                        })
                    }
                })
            },
            cancel(){     //添加修改表单取消按钮触发
                this.dialogVisible=false;
                this.title = '';
            },

            /*初始化数据*/
            initTable(e){  //初始化表格数据
                this.$http.post("/system/api/menu/selectAll",this.queryParams).then(result=>{
                    this.menuTableList = result.data.data;
                })
            },
            initStatus(){   //初始化状态字典
                this.$http.get("/system/api/dict/data/findByType/sys_normal_disable").then(result=>{
                    this.statusOptions = result.data.data;
                })
            },
            statusFormat(row){  //状态字典解析
                let v = row.status;
                return this.formatDict2(this.statusOptions,v);
            },
        }
    }
</script>

<style scoped>

</style>
